深入ES6(一) let与const

let命令

##基本用法 ##
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
   var a =1;
   let b =2;
   console.log(b);//2
 }
   console.log(a);//1
   console.log(b);//b is not defined

---

用let做循环处理就会比较方便,不会使i作用于外面。

for (let i = 0; i < 10; i++) {
}
console.log(i);//i is not defined

for (var i = 0; i < 10; i++) {
    
}
console.log(i)//10

用let时,因为变量是作用于遍历块内的,所以取过来的值是即时的,而var声明的是全局变量,调用时全局变量已经走完循环变成了10

let a =[];
for (let i = 0; i < 10; i++) {
    a[i]=function(){
        console.log(i)
    }
}
a[6]()//6
let b =[];
for (var i = 0; i < 10; i++) {
    b[i]=function(){
        console.log(i)
    }
}
b[6]()//10

let 不能创建名字一样的变量,如果变量名一样会报错

let i = 1;
let i = 2;
console.log(i)//Identifier 'i' has already been declared

let和var的报错提示也是不一样的

console.log(bar)//bar is not defined
let bar;
console.log(tar)//undefined
var tar

只要有let的存在,那么这个变量只存在于该作用域内

var tmp = 123;
if (true) {
   tmp = 'abc'; // let&const.html:64 Uncaught ReferenceError: tmp is not defined
   let tmp ="123";
}
if (true) {
   tmp = 'abc'; //abc
}

##暂时性死区: ##

只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

// 不报错
var x = x;
// 报错
let x = x; // x is not defined

let不允许重复声明变量

function () {
  let a = 10;
  var a = 1;// 报错
}
function () {
  let a = 10;
  let a = 1;// 报错
}

块级作用域理解:
下面代码中外层代码块不受内层代码块影响

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

const命令

基本用法:

const声明一个只读的常量。一旦声明，常量的值就不能改变。

---

一旦常量被更改,将会报错

const a = 1
console.log(a) // 1
a = 2 //TypeError: Assignment to constant variable.

声明const时必须有初始值,因为const不能被修改,所以当声明没有初始值的const会报错

const index;
// SyntaxError: Missing initializer in const declaration

同let一样,const也存在暂时性死区

if (true) {
  console.log(index); // ReferenceError
  const index = 5;
}

如果一个变量被声明过,const再来声明也会报错

var name = "temzl";
let age = 22;
// 以下两行都会报错
const name = "张三";
const age = 18;

const的实际目的并不只是使该变量不可改动,实际意义在于const指向的该变量内存地址不可改动

const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

申明变量的六种方式:

1、var
2、function
3、let
4、const
5、import
6、class

不要再说只有一个var了 ✧(≖ ◡ ≖✿)嘿嘿

如果有时间后面会讲讲import和class

本文部分文章引用阮一峰大神的文章,地址:http://es6.ruanyifeng.com/#docs/let